//
@itemHOrW : 220px;
@borderWidth : 10px;
@borderBgColor:#ecab18;
@borderColor:#1ad280;
@borderTypeSolid:solid;
@borderBg:@borderWidth @borderTypeSolid @borderBgColor;
//common
.radius(@radius:50%) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
.transition(@attribute:all,@during:.5s,@mode:ease-in-out,@delay:0s){
  transition: @attribute @during @mode @delay;
  -moz-transition: @attribute @during @mode @delay;
  -webkit-transition: @attribute @during @mode @delay;
  -o-transition: @attribute @during @mode @delay;
}
.rotate(@number:180deg){
  -webkit-transform: rotate(@number);
  -moz-transform: rotate(@number);
  -ms-transform: rotate(@number);
  -o-transform: rotate(@number);
  transform: rotate(@number);
}
.scale(@number:1.5){
  -webkit-transform: scale(@number);
  -moz-transform: scale(@number);
  -ms-transform: scale(@number);
  -o-transform: scale(@number);
  transform: scale(@number);
}
.translateX(@x:0){
  -webkit-transform: translateX(@x);
  -moz-transform: translateX(@x);
  -ms-transform: translateX(@x);
  -o-transform: translateX(@x);
  transform: translateX(@x);
}

.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translateX: 10px) {
  -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translateX);
  -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translateX);
  -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translateX);
  -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translateX);
  transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translateX);
}

.block{display: block}

.sec{
  ul{
    li{
      margin-top: 30px;
    }
  }
}
.h-item{
  width: @itemHOrW;
  height:@itemHOrW;
  display: inline-block;
  overflow: hidden;
  position: relative;
  & .info,.info-container{
    .block;
    .radius;
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom:0;
    overflow: hidden;
    text-align: center;
    z-index: 1;
    .info-back{
      h3{
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        margin-bottom:5px;
        padding-bottom: 5px;
      }
      p{
        font-size: 12px;
      }
    }
  }
  &.circle{
    .radius;
    .img{
      width: 100%;
      height:100%;
      display: block;
      position: relative;
      .transition();
      img{
        width: 100%;
        height:100%;
        .radius;
      }
    }
    .img:before{
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      .radius();
      .transition();
      box-shadow: inset 0 0 0 @borderWidth rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
    }
  }

  //效果1
  &.effect1{
    .spin{
      .block;
      .transition;
      .radius;
      width:100%;
      height:100%;
      border: @borderBg;
      border-right-color: @borderColor;
      border-bottom-color: @borderColor;
      position: absolute;
      left:0;
      top:0;
      right: 0;
      bottom:0;
      z-index: 9;
    }
    .img{
      .block;
      .radius;
      position: absolute;
      left:0;
      top:0;
      right: 0;
      bottom:0;
      overflow: hidden;
      text-align: center;
      z-index: 1;
      img{
        width:100%;
        height:100%;
        .radius;
        .transition;
      }
    }
    .info{
      opacity: 0;
      background: rgba(0, 0, 0, 0.6);
      .transition;
    }
  }
  &.effect1 a:hover{
    .spin{
      .rotate
    }
    .img{
      img{
        .scale
      }
    }
    .info{
      opacity: 1;
    }
  }

  //效果2
  &.effect2{
    .info{
      background-color: #333;
      pointer-events: none;
      .transition();
    }
  }
  &.effect2.left-to-right{
    .info{
      .translateX(-100%);
      z-index: 1;
    }
    .img{
      .transform(0,1,0,0);
      z-index: 9;
    }
  }
  &.effect2.left-to-right a:hover{
    .info{
      .translateX(0);
    }
    .img{
      .transform(0,.5,0,100%)
    }
  }

  //效果3
  &.effect3{
    .img{
      .transition();
      .transform(0,1,0,0);
    }
    .info{
      background-color: #333;
      .transition();
      .transform(0,.5,0,0);
      opacity:0;
    }
  }
  &.effect3 a:hover{
    .img{
      opacity:0;
      .transform(0,1.5,0,0);
    }
    .info{
      .transition();
      .transform(0,1,0,0);
      opacity:1;
    }
  }

  //效果4
  &.effect4{
    .img-container{
      .transition();
      .img{
        .transition(all,.5s,ease-in-out,.5s);
      }
    }
    .info-container{
      .transition(all,.5s,ease-in-out,.5s);
      .info{
        background-color: #333;
        .transition(all,.5s,ease-in-out,1s);
      }
    }
  }
  &.effect4.left-to-right{
    .img-container{
      .transform(0,1,0,0);
      .img{
        .transform(0,1,0,0);
      }
    }
    .info-container{
      .transform(0,.5,0,200%);
      .info{
        .transform(0,.5,0,0);
      }
    }
  }
  &.effect4 a:hover{
   .img-container{
     .transform(0,.5,0,0);
     .img{
       .transform(0,1,0,-200%);
     }
   }
   .info-container{
     .transform(0,1,0,0);
     .info{
       .transform(0,1,0,0);
     }
    }
  }



}